<template>
  <div>
    <div>
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
      ></el-date-picker>
      <el-divider direction="vertical"></el-divider>
      <el-select v-model="titleSelected" placeholder="请选择">
        <el-option
          v-for="item in brief"
          :key="item.title"
          :label="item.title"
          :value="item.title"
        >
        </el-option>
      </el-select>

      <el-divider direction="vertical"></el-divider>
      <el-button type="primary" @click="doQuery()">检索</el-button>
    </div>
    <el-divider></el-divider>
    <div>
      <el-table
        :data="storage"
        style="width: 100%"
        v-if="storage && storage.length > 0"
      >
        <el-table-column prop="number" label="记录ID"></el-table-column>
        <el-table-column prop="date" label="提交时间"></el-table-column>
        <el-table-column label="问卷标题">
          <template slot-scope="scope">{{ scope.row.data.title }}</template>
        </el-table-column>
        <el-table-column label="昵称">
          <template slot-scope="scope">{{
            scope.row.data.header["昵称"]
          }}</template>
        </el-table-column>
        <el-table-column label="年龄">
          <template slot-scope="scope">{{
            scope.row.data.header["年龄"]
          }}</template>
        </el-table-column>
        <el-table-column label="性别">
          <template slot-scope="scope">{{
            scope.row.data.header["性别"]
          }}</template>
        </el-table-column>
        <el-table-column label="入职年份">
          <template slot-scope="scope">{{
            scope.row.data.header["入职年份"]
          }}</template>
        </el-table-column>
        <el-table-column label="部门">
          <template slot-scope="scope">{{
            scope.row.data.header["部门"]
          }}</template>
        </el-table-column>
        <el-table-column label="岗位">
          <template slot-scope="scope">{{
            scope.row.data.header["岗位"]
          }}</template>
        </el-table-column>
        <el-table-column label="分值1">
          <template slot-scope="scope">{{
            scope.row.data.result.val[0]
          }}</template>
        </el-table-column>
        <el-table-column label="分值2">
          <template slot-scope="scope">{{
            scope.row.data.result.val[1]
          }}</template>
        </el-table-column>
        <el-table-column label="结果1">
          <template slot-scope="scope">{{
            scope.row.data.result.msg[2]
          }}</template>
        </el-table-column>
        <el-table-column label="结果2">
          <template slot-scope="scope">{{
            scope.row.data.result.msg[0]
          }}</template>
        </el-table-column>
        <el-table-column label="结果3">
          <template slot-scope="scope">{{
            scope.row.data.result.msg[1]
          }}</template>
        </el-table-column>
        <el-table-column label="问卷详情">
          <template slot-scope="scope"
            ><div v-if="scope.row.data.detail">
              <span
                v-for="(data, idx) in scope.row.data.detail.radio"
                :key="idx"
              >
                {{ idx + 1 }}. {{ scope.row.data.detail.questions[idx] }}:
                {{ scope.row.data.detail.radio[idx] }}
                {{ scope.row.data.detail.check[idx] }}
              </span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  name: "queryView",
  data() {
    return {
      titleSelected: "",
      dateRange: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  computed: {
    ...mapState(["brief"]),
    storage() {
      return this.$store.state.storage;
    }
  },
  methods: {
    ...mapActions(["loadBrief"]),
    doQuery() {
      this.$store.dispatch("queryStorage", {
        range: this.dateRange,
        title: this.titleSelected
      });
    }
  },
  created() {
    this.$store.commit("SET_TITLE", "检索数据");
    this.loadBrief();
  }
};
</script>
